<template>
    <div class="bg-content">
        <div class="title">
            <img src="@/assets/home/cricle.png" alt="" class="title-pl" />
            <span class="s-title">
                <span class="title-name">&nbsp;&nbsp;安全状态</span>
            </span>
            <span class="right-light"></span>
        </div>
        <div class="content">
            <ul>
                <li>
                    <div class="name">
                        <span>消防启动成功率</span>
                        <span>{{ num1 }}</span>
                    </div>
                    <div class="line">
                        <div class="num1" :style="{width:value1}"><div class="num2"></div></div>
                    </div>
                </li>
                <li>
                    <div class="name">
                        <span>防火成功率</span>
                        <span>{{value2}}</span>
                    </div>
                    <div class="line">
                        <div class="num1" :style="{width:value2}">><div class="num2"></div></div>
                    </div>
                </li>
                <li>
                    <div class="name">
                        <span>光伏发电占比</span>
                        <span>{{ num3 }}</span>
                    </div>
                    <div class="line">
                        <div class="num1" :style="{width:value3}">><div class="num2"></div></div>
                    </div>
                </li>
                <li>
                    <div class="name">
                        <span>光伏转换率</span>
                        <span>{{ value4 }}</span>
                    </div>
                    <div class="line">
                        <div class="num1" :style="{width:value4}">><div class="num2"></div></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
          num1:'100%',
          value1:'100%',
          value2:'100%',
          num3:'80%',
          value3:'80%',
          value4:'55%'
        };
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.bg-content {
    height: calc((100vh - 0.75rem) / 3 - 0.18rem);
    margin-bottom: 0.05rem;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right,#000606, #44c9c9) 1;
    padding: 0.05rem;
    .title {
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: left;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #3aacac, #000202) 1;
        .title-name {
            font-size: 0.14rem;
        }
        .title-pl {
            position: relative;
            top: 0.05rem;
        }
    }
    .content {
        height: calc((100vh - 0.75rem) / 3 - 0.18rem - 0.45rem);
        ul{
            li{
                .name{
                    color: #ffffff;
                    text-align: left;
                    font-size: 14px;
                    margin: 3px 0;
                    font-size: 12px;
                    span:nth-child(2){
                        float: right;

                    }
                }
                .line{
                    width: 100%;
                    height: 0.16rem;
                    background: #113434;
                    .num1{
                      position: relative;
                        width: 78%;
                        height: 100%;
                        border-right: 3px solid #ffffff;
                        .num2{
                            width: 100%;
                            background: linear-gradient(to right, #154242, #43c8c8);
                            height: 50%;
                            position: absolute;
                            top: 25%;
                        }
                    }
                }
            }
        }
    }
}
</style>
